<template>
  <div class="talent-action-point">
    <a-popover placement="bottomRight" overlayClassName="talent-action-popover">
      <template slot="content">
        <ul class="talent-action-point-uls ">
          <!-- <li class="triangle"></li> -->
          <slot />
        </ul>
      </template>
      <slot name="actionPointBtn">
        <p>
          <span></span>
          <span></span>
          <span></span>
        </p>
      </slot>
    </a-popover>
  </div>
</template>

<script>
export default {};
</script>
<style lang="scss">
.talent-action-point {
  display: inline-block;
  vertical-align: text-top;
  p {
    height: 18px;
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    span {
      width: 4px;
      height: 4px;
      background: var(--primary);
      border-radius: 50%;
      margin-right: 4px;
    }
  }
}
.talent-action-point-uls {
  margin: 0;
  padding: 0;
  max-height: 236px;
  overflow: auto;
  li {
    width: 204px;
    height: 58px;
    z-index: 999;
    cursor: pointer;
    padding: 12px;
    &:hover {
      background: #f4f6fa;
    }
    .swap-btn-title {
      display: flex;
      justify-content: space-between;
      & > span:nth-child(2) {
        color: var(--primary);
        font-size: 12px;
      }
    }
    .swap-btn-time {
      font-size: 12px;
      color: #a6a8b4;
    }
  }
}
.talent-action-popover {
  // width: 100px;
  .ant-popover-inner-content {
    padding: 0;
  }
}
.overflowsQH {
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  max-width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
